<template>
    <view class="bottom-bar">
        <view class="go-cart-bar" v-if="total">
            <view class="go-cart-bar-left">
                <view>
                    <text class="total-text-label">合计：</text>
                    <text class="total-text-price">{{ total.totalPrice }}</text>
                    <text class="total-text-price-unit">元</text>
                </view>
                <text class="total-amount-text">共{{ total.totalSpace }}种商品</text>
            </view>
            <view class="go-cart-bar-right">
                <view class="btn-cart" @click="goCart">
                    <view class="cart-num">
                        <iconsfont customIcons="icon-gouwuche1" :color="'#ffffff'" size="30"></iconsfont>
                    </view>
                    <text class="cart-text">购物车</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { eventBus } from "@/utils/eventBus.js"
import { getUserCarList, getCartTotal } from "@/utils/cartUtil.js"

export default {
    data() {
        return {
            total: null,
        }
    },
    mounted() {
        //初始化获取购物车
        eventBus.$on("SET_CART", (msg) => {
            if (msg) {
                this.getCartNum(msg)
            }
        })
        //获取购物车
        getUserCarList(true, 24)
    },
    unmounted() {
        eventBus.$off("SET_CART", (msg) => {
            if (msg) {
                this.getCartNum(msg)
            }
        })
    },
    methods: {
        goCart() {
            this.easyGoTo("/pages/cart/cartTemp?orderType=24")
        },
        //获取购物车总数
        getCartNum(cartData) {
            getCartTotal(cartData, (res) => {
                this.total = res
            })
        },
    },
}
</script>

<style lang="scss">
.bottom-bar {
    justify-content: flex-start;
}
.go-cart-bar {
    display: flex;
    flex-direction: row;
    flex: 1;
    .go-cart-bar-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        .total-text-label {
            font-size: $font-size-24;
        }
        .total-text-price {
            font-size: $font-size-36;
            color: $app-color-main;
            margin-right: 4rpx;
        }
        .total-text-price-unit {
            font-size: $font-size-28;
        }
    }
    .total-amount-text {
        color: $app-color-text-tip;
    }
    .btn-cart {
        width: 272rpx;
        background: $app-color-main;
        height: 80rpx;
        border-radius: 80rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .cart-num {
            padding-bottom: 6rpx;
        }
        .cart-text {
            margin-left: 12rpx;
            color: $color-white;
        }
    }
}
</style>
